<ui:composition template="/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:cc="http://sourceforge.net/projects/jsf-comp">

    <ui:define name="styleone">
        <h:form id="fMenu">
            <ul>
                <li><a href="/reservasis/protected/principal.htm" id="linkPrincipal" title="#{bundle.menuPrincipal}">#{bundle.menuPrincipal}</a></li>
                <li><h:commandLink action="#{apartamentoAction.setup}" title="#{bundle.menuApartamento}" value="#{bundle.menuApartamento}"/></li>
                <li><a href="/reservasis/protected/reserva/reserva.htm" id="linkReserva" title="#{bundle.menuReserva}"  class="current">#{bundle.menuReserva}</a></li>
                <li><h:commandLink action="#{hospedeAction.setup}" title="#{bundle.menuHospede}" value="#{bundle.menuHospede}" /></li>
                <li><h:commandLink action="#{cadastroUsuarioAction.setup}" title="#{bundle.menuUsuario}" value="#{bundle.menuUsuario}" /></li>
                <li><h:commandLink action="#{identity.logout}" value="#{bundle.menuSair}" title="#{bundle.menuSair}" /></li>
            </ul>
        </h:form>
    </ui:define>

    <ui:define name="colunaEsquerda">

    </ui:define>

    <ui:define name="conteudo">
        <br/>
        <center>
            <rich:messages layout="table"
                           errorClass="errorClass"
                           infoClass="infoClass"
                           warnClass="warnClass"
                           styleClass="painelMensagem"
                           ajaxRendered="true"/>
        </center>
        <br/>
        <rich:simpleTogglePanel id="stpReserva" switchType="client">
            <f:facet name="header">
                #{bundle.geralCriteriosPesquisa}
            </f:facet>

            <h:form id="fReserva">
                <a4j:loadScript  type="text/javascript" src="/resources/scripts/jquery.maskedinput-1.1.4.js" />
                <h:panelGrid cellpading="2" cellspacing="2" columns="2" columnClasses="field-names, fields">
                    <h:outputLabel for="opDataMarcacao">
                        <h:outputText value="#{bundle.reservaDataMarcacao}: " />
                    </h:outputLabel>

                    <h:panelGroup>
                        <h:inputText id="itDataMarcacao" value="#{reservaHospedagemAction.paramDataMarcacao}" label="#{bundle.reservaDataMarcacao}" size="10">
                            <rich:jQuery selector="#itDataMarcacao" query="mask('99/99/9999')" timing="onload"/>
                            <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                        </h:inputText>
                        <h:outputText value=" (dd/mm/aaaa)" styleClass="field-name-bold" />
                    </h:panelGroup>

                    <h:outputLabel for="opDataChegada">
                        <h:outputText value="#{bundle.reservaDataChegada}: " />
                    </h:outputLabel>

                    <h:panelGroup>
                        <h:inputText id="itDataChegada" value="#{reservaHospedagemAction.paramDataChegada}" label="#{bundle.reservaDataChegada}" size="10">
                            <rich:jQuery selector="#itDataChegada" query="mask('99/99/9999')" timing="onload"/>
                            <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                        </h:inputText>
                        <h:outputText value=" (dd/mm/aaaa)" styleClass="field-name-bold" />
                    </h:panelGroup>

                    <h:outputLabel for="opTipoApartamento">
                        <h:outputText value="#{bundle.reservaTipoApartamento} :" />
                    </h:outputLabel>

                    <h:selectOneMenu id="somTipoApartamento" value="#{reservaHospedagemAction.paramTipoApartamento}" label="#{bundle.reservaTipoApartamento}">
                        <s:selectItems value="#{reservaHospedagemAction.tiposApartamento}" var="tp" label="#{tp.descricao}" itemValue="#{tp.idtipo}" noSelectionLabel="..."/>
                    </h:selectOneMenu>

                    <h:outputLabel for="opTipo">
                        <h:outputText value="#{bundle.reservaStatus} :" />
                    </h:outputLabel>

                    <h:selectOneMenu id="somTipo" value="#{reservaHospedagemAction.paramStatusReserva}" label="#{bundle.reservaStatus}">
                        <f:selectItem itemValue="" itemLabel="..."/>
                        <f:selectItem itemValue="0" itemLabel="Reserva OK" />
                        <f:selectItem itemValue="1" itemLabel="Reservado"/>
                        <f:selectItem itemValue="2" itemLabel="Hospedado" />
                    </h:selectOneMenu>

                    <h:outputLabel for="opHospede">
                        <h:outputText value="#{bundle.reservaNomeHospede}: " />
                    </h:outputLabel>

                    <h:inputText id="itHospede" value="#{reservaHospedagemAction.paramHospede}" label="#{bundle.reservaNomeHospede}" size="50" />
                </h:panelGrid>
                <br/>
                <a4j:commandLink id="clPesquisar"
                                 status="status"
                                 action="#{reservaHospedagemAction.pesquisar}"
                                 styleClass="link dr-toolbar-ext rich-toolbar"
                                 reRender="opResultado, dtReserva">
                    <h:graphicImage value="/resources/images/system-search.png"/>
                    <h:outputText value="#{bundle.botaoPesquisar}" />
                </a4j:commandLink>

                <h:commandLink id="clCriarReserva"
                               immediate="true"
                               action="#{reservaHospedagemAction.criarReservaSetup}"
                               styleClass="link dr-toolbar-ext rich-toolbar">
                    <h:graphicImage value="/resources/images/go-home.png" />
                    <h:outputText value="#{bundle.botaoNovaReserva}" />
                </h:commandLink>

                <h:commandLink id="clCriarHospedagem"
                               immediate="true"
                               action="#{reservaHospedagemAction.criarSetup}"
                               styleClass="link dr-toolbar-ext rich-toolbar">
                    <h:graphicImage value="/resources/images/go-home.png" />
                    <h:outputText value="#{bundle.botaoNovaHospedagem}" />
                </h:commandLink>
            </h:form>
        </rich:simpleTogglePanel>
        <br/>
        <a4j:outputPanel id="opResultado">
            <a4j:form id="fdtReserva">
                <rich:dataTable id="dtReserva"
                                value="#{reservas}"
                                var="r"
                                width="100%"
                                rows="10"
                                cellpadding="0"
                                cellspacing="0"
                                columnClasses="colunaCentralizada, colunaEsquerda, colunaCentralizada,colunaCentralizada, colunaCentralizada, colunaCentralizada,colunaCentralizada"
                                columnsWidth="55, 350,10,30,30,20,120"
                                onRowMouseOver="this.style.backgroundColor='#EFF7FF'"
                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
                    <f:facet name="header">
                        #{bundle.reservas}
                    </f:facet>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.apartamentoNumero}
                        </f:facet>
                        #{r.apartamento.numApart}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.hospede}
                        </f:facet>
                        #{r.hospede.nome}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.reservaDataChegada}
                        </f:facet>
                        <h:outputText value="#{r.datachegada}">
                            <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}"/>
                        </h:outputText>
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.apartamentoNumeroQuarto}
                        </f:facet>
                        #{r.apartamento.numQuartosApart}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.apartamentoTipo}
                        </f:facet>
                        #{r.apartamento.tipoApartamento.descricao}
                    </rich:column>

                    <rich:column>
                        <f:facet name="header">
                            #{bundle.reservaStatus}
                        </f:facet>
                        <h:outputText value="#{r.reservaDescricao}" styleClass="#{((r.reserva == '0') ? 'reservaOK' : (r.reserva == '1' ? 'reserva' : 'reservaHospedado'))}" />
                    </rich:column>

                    <rich:column style="text-align:left;padding-left:20px">
                        <f:facet name="header">
                            #{bundle.geralOpcoes}
                        </f:facet>

                        <a4j:commandLink id="detalhar"
                                         action="#{reservaHospedagemAction.detalhar}"
                                         styleClass="link"
                                         oncomplete="Richfaces.showModalPanel('mpDetalhar',{});"
                                         reRender="mpDetalhar">
                            <h:graphicImage value="/resources/images/x-office-document.png" />
                            <h:outputText value="#{bundle.botaoDetalhar}" />
                        </a4j:commandLink>
                        <br/>
                        <a4j:commandLink id="alterar"
                                         action="#{reservaHospedagemAction.alterarSetup}"
                                         styleClass="link"
                                         rendered="#{r.reserva != 0 }">
                            <h:graphicImage value="/resources/images/edit-paste.png" />
                            <h:outputText value="#{bundle.botaoAlterar}" />
                        </a4j:commandLink>
                        <br/>
                        <a4j:commandLink id="excluir"
                                         action="#{reservaHospedagemAction.excluir}"
                                         onclick="if (!confirm('Deseja excluir ?'))return false;"
                                         reRender="dtReserva"
                                         styleClass="link"
                                         rendered="#{r.reserva == 1}">
                            <h:graphicImage value="/resources/images/user-trash-full.png" />
                            <h:outputText value="#{bundle.botaoExcluir}" />
                        </a4j:commandLink>
                        <br/>
                        <a4j:commandLink id="gerarHospedagem"
                                         action="#{reservaHospedagemAction.gerarHospedagem}"
                                         styleClass="link"
                                         oncomplete="Richfaces.showModalPanel('mpHospedagem',{});"
                                         reRender="mpHospedagem"
                                         rendered="#{r.reserva == 1}">
                            <h:graphicImage value="/resources/images/icon_home.gif" />
                            <h:outputText value="#{bundle.botaoGerarHospedagem}" />
                        </a4j:commandLink>
                        <br/>
                        <a4j:commandLink id="gerarPagamento"
                                         action="#{reservaHospedagemAction.gerarPagamentoSetup}"
                                         styleClass="link"
                                         oncomplete="Richfaces.showModalPanel('mpPagamento',{});"
                                         reRender="mpPagamento"
                                         rendered="#{r.reserva == 2}">
                            <h:graphicImage value="/resources/images/accessories-calculator.png" />
                            <h:outputText value="#{bundle.botaoGerarPagamento}" />
                        </a4j:commandLink>
                    </rich:column>
                </rich:dataTable>
                <rich:datascroller align="right" for="dtReserva" boundaryControls="auto" />
            </a4j:form>
        </a4j:outputPanel>

        <rich:modalPanel id="mpPagamento" autosized="true" width="760">
            <f:facet name="header">
                <h:outputText value="#{bundle.reservaGerarPagamento}" />
            </f:facet>

            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/resources/images/panelClose.png" style="cursor:pointer" id="CLOSEp"/>
                    <rich:componentControl for="mpPagamento" attachTo="CLOSEp" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>
            <br/>
            <h:panelGrid cellspacing="2" cellpading="2" columns="2" columnClasses="field-names, fields">
                <h:outputLabel for="opValor">
                    <h:outputText value="#{bundle.reservaValorPagar} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.valor}" styleClass="link"/>

                <h:outputLabel for="opDataSaida">
                    <h:outputText value="#{bundle.reservaDataSaida} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.datasaida}" styleClass="link">
                    <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                </h:outputText>

                <h:outputLabel for="opHospedePagamento">
                    <h:outputText value="#{bundle.reservaNomeHospede} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.hospede.nome}" styleClass="link"/>

                <h:outputLabel for="opApartamentoPagamento">
                    <h:outputText value="#{bundle.reservaApartamento} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.numApart}" styleClass="link" />


                <h:outputLabel for="opApartamentoDescricaoTipoPagamento">
                    <h:outputText value="#{bundle.apartamentoTipo} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.tipoApartamento.descricao}" styleClass="link" />
            </h:panelGrid>
            <h:form>
                <h:commandLink action="#{reservaHospedagemAction.gerarPagamento}"
                               styleClass="link dr-toolbar-ext rich-toolbar"
                               reRender="dtReserva">
                    <h:graphicImage value="/resources/images/dialog-ok.png"/>
                    <h:outputText value="#{messages.botaoOk}" />
                </h:commandLink>
                <a4j:commandLink action="#{reservaHospedagemAction.cancelarPagamento}"
                                 status="status"
                                 styleClass="link dr-toolbar-ext rich-toolbar"
                                 immediate="true"
                                 onclick="Richfaces.hideModalPanel('mpPagamento', {});">
                    <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                    <h:outputText value="#{messages.botaoCancelar}" />
                </a4j:commandLink>
            </h:form>
        </rich:modalPanel>

        <rich:modalPanel id="mpHospedagem" autosized="true" width="760">
            <f:facet name="header">
                <h:outputText value="#{bundle.reservaGerarHospedagem}" />
            </f:facet>

            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/resources/images/panelClose.png" style="cursor:pointer" id="CLOSEh"/>
                    <rich:componentControl for="mpHospedagem" attachTo="CLOSEh" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>
            <br/>
            <h:panelGrid cellspacing="2" cellpading="2" columns="2" columnClasses="field-names, fields">
                <h:outputLabel for="opDataChegada" >
                    <h:outputText value="#{bundle.reservaDataChegada} :" />
                </h:outputLabel>

                <h:panelGroup >
                    <h:inputText id="itDataChegada" value="#{reservaHospedagemAction.reserva.datachegada}" label="#{bundle.reservaDataChegada}" size="10">
                        <rich:jQuery selector="#itDataChegada" query="mask('99/99/9999')" timing="onload" />
                        <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                    </h:inputText>
                    <h:outputText value=" (dd/mm/aaaa)" />
                </h:panelGroup>

                <h:outputLabel for="opDataReserva" >
                    <h:outputText value="#{bundle.reservaDataReserva} :" />
                </h:outputLabel>

                <h:panelGroup rendered="#{reservaHospedagemAction.reserva.reserva == 1}">
                    <h:outputText id="itDataReserva" value="#{reservaHospedagemAction.reserva.datareserva}" label="#{bundle.reservaDataReserva}" size="10" styleClass="link">
                        <f:convertDateTime type="date" pattern="#{bundle.dataFormatoPadraoData}" timeZone="#{bundle.dataTimeZone}" />
                    </h:outputText>
                </h:panelGroup>

                <h:outputLabel for="opHospede">
                    <h:outputText value="#{bundle.reservaNomeHospede} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.hospede.nome}" styleClass="link"/>

                <h:outputLabel for="opApartamento">
                    <h:outputText value="#{bundle.reservaApartamento} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.numApart}" styleClass="link" />

                <h:outputLabel for="opApartamentoQuartos">
                    <h:outputText value="#{bundle.apartamentoNumeroQuarto} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.numQuartosApart}" styleClass="link"/>

                <h:outputLabel for="opApartamentoDescricaoTipo">
                    <h:outputText value="#{bundle.apartamentoTipo} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.tipoApartamento.descricao}" styleClass="link" />

                <h:outputLabel for="opApartamentoDescricao">
                    <h:outputText value="#{bundle.apartamentoDescricao} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.descricaoApart}" styleClass="link"/>

            </h:panelGrid>
            <h:form>
                <h:commandLink action="#{reservaHospedagemAction.alterar}"
                               styleClass="link dr-toolbar-ext rich-toolbar"
                               reRender="dtReserva">
                    <h:graphicImage value="/resources/images/dialog-ok.png"/>
                    <h:outputText value="#{messages.botaoOk}" />
                </h:commandLink>
                <a4j:commandLink action="#{reservaHospedagemAction.cancelarPagamento}"
                                 status="status"
                                 styleClass="link dr-toolbar-ext rich-toolbar"
                                 immediate="true"
                                 onclick="Richfaces.hideModalPanel('mpHospedagem', {});">
                    <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                    <h:outputText value="#{messages.botaoCancelar}" />
                </a4j:commandLink>
            </h:form>

        </rich:modalPanel>

        <rich:modalPanel id="mpDetalhar" autosized="true" width="640">
            <f:facet name="header">
                <h:outputText value="#{bundle.geralDetalhar}" />
            </f:facet>

            <f:facet name="controls">
                <h:panelGroup>
                    <h:graphicImage value="/resources/images/panelClose.png" style="cursor:pointer" id="CLOSE"/>
                    <rich:componentControl for="mpDetalhar" attachTo="CLOSE" operation="hide" event="onclick"/>
                </h:panelGroup>
            </f:facet>

            <br/>
            <h:panelGrid cellspacing="2" cellpading="2" columns="2" columnClasses="field-names, fields">
                <h:outputLabel for="opHospede">
                    <h:outputText value="#{bundle.reservaNomeHospede} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.hospede.nome}" styleClass="link"/>

                <h:outputLabel for="opApartamento">
                    <h:outputText value="#{bundle.reservaApartamento} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.numApart}" styleClass="link" />

                <h:outputLabel for="opApartamentoQuartos">
                    <h:outputText value="#{bundle.apartamentoNumeroQuarto} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.numQuartosApart}" styleClass="link"/>

                <h:outputLabel for="opApartamentoDescricaoTipo">
                    <h:outputText value="#{bundle.apartamentoTipo} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.tipoApartamento.descricao}" styleClass="link" />

                <h:outputLabel for="opApartamentoDescricao">
                    <h:outputText value="#{bundle.apartamentoDescricao} :" />
                </h:outputLabel>

                <h:outputText value="#{reservaHospedagemAction.reserva.apartamento.descricaoApart}" styleClass="link"/>
            </h:panelGrid>

            <h:form>
                <a4j:commandLink status="status"
                                 styleClass="link dr-toolbar-ext rich-toolbar"
                                 immediate="true"
                                 onclick="Richfaces.hideModalPanel('mpDetalhar', {});">
                    <h:graphicImage value="/resources/images/dialog-cancel.png"/>
                    <h:outputText value="#{messages.botaoCancelar}" />
                </a4j:commandLink>
            </h:form>
        </rich:modalPanel>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>

    </ui:define>

    <ui:define name="colunaDireita">

    </ui:define>
</ui:composition>